<template>
	<div class="crud-container flex-column">
		<el-row type="flex" align="middle" class="tabs-box pr-1">
			<el-tabs type="card" v-model="activeName" @tab-click="tabClick" style="width: 100%">
				<el-tab-pane
					v-for="item in tabs"
					:key="item.id"
					:label="item.title"
					:name="item.title"
				>
					<div class="card-container" v-if="videoList.length">
						<div
							class="card-item"
							v-for="(item, index) in videoList"
							:key="index"
							@click="showVideo(index)"
						>
							<el-image
								:src="item.cover"
								style="width: 100%; height: 100%"
								fit="none"
							/>
							<div class="videoTitle">{{ item.title }}</div>
						</div>
					</div>
					<cl-empty v-else tips="暂无视频" />
				</el-tab-pane>
			</el-tabs>
			<cl-flex1 />
		</el-row>
		<cl-course ref="course" />
		<el-dialog title="视频" :visible.sync="visible" @close="close">
			<video :src="on ? videoSrc : ''" id="video" width="100%" controls />
		</el-dialog>
	</div>
</template>

<script>
export default {
	name: "CourseVideo",
	data() {
		return {
			tabs: [],
			videoList: [],
			activeName: "",
			visible: false,
			on: false, // 是否可以播放
			videoSrc: "" // 视频地址
		};
	},
	methods: {
		tabClick(tab) {
			let id = this.tabs[tab.index].id;
			this.getVideolist(id);
		},
		showVideo(idx) {
			// this.$refs.course.open();
			this.visible = true;
			this.on = true;
			this.videoSrc = this.videoList[idx].resource_url;
		},
		//获取tabs
		async getVideotitle() {
			const data = await this.$service.guidevideo.getVideotitle();
			this.tabs = data;
			if (data.length) {
				this.activeName = data[0].title;
				this.getVideolist(data[0].id);
			}
		},
		//获取视屏
		async getVideolist(id) {
			const data = await this.$service.guidevideo.getVideolist({ id });
			this.videoList = data;
		},
		close() {
			this.on = false;
		}
	},
	mounted() {
		this.getVideotitle();
	}
};
</script>

<style lang="scss" scoped>
.tabs-box {
	margin-top: -1px;
}
::v-deep {
	.el-tabs {
		position: relative;
		bottom: -1px;
		&__header {
			margin-bottom: 0;
		}
	}
}
.crud-container {
	height: 100%;
	box-sizing: border-box;
	overflow: auto;
	background: #fff;
}
.card-container {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	p {
		width: 100%;
		padding: 20px 0;
		text-align: center;
		font-size: 16px;
	}
	.card-item {
		width: 230px;
		height: 330px;
		margin: 20px 20px 0 20px;
		border-radius: 10px;
		border: 1px solid #ddd;
		overflow: hidden;
		position: relative;
		cursor: pointer;
		.videoTitle {
			width: 100%;
			height: 40px;
			line-height: 40px;
			text-align: center;
			background: #fff;
			position: absolute;
			bottom: 0;
			right: 0;
			z-index: 9;
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
			font-size: 16px;
		}
	}
}
</style>
